<template>
  <div class="upper">
    <!-- 传递中心点到Map组件 -->
    <Map :center="mapCenter" />
  </div>
  <div class="bottom">
    <div class="pic">
      <img src="../assets/编组 5.png" alt="小喇叭" />
      <span class="top">附近司机正在听单</span>
    </div>
    <div class="box">
      <div class="img1">
        <img src="../assets/ic_origin.png" alt="" />
        <span class="text centered-text" @click="startpos">{{ city }}.{{ current1Address }}</span>
        <span class="img2"><img src="../assets/ic_arrow备份.png" alt="" /></span>
      </div>
      <div class="box2">
        <img src="../assets/ic_origin备份.png" alt="" />
        <span class="text2" @click="endPot">请输入你要去的目的地</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import Map from '@/components/Map.vue'
import axios from 'axios'
import { createSignHeader } from '@/crypto/a1.js'
import { onMounted, ref, watch } from 'vue'
import { useCityStore } from '@/stores/cityStore'
const router = useRouter()
const cityStore = useCityStore()
const current1Address = ref('') // 使用 ref 管理 current1Address
const mapCenter = ref([118.186868, 24.475187])
const city = ref(null)

// 监听cityStore中的currentAddress变化
watch(
  () => cityStore.currentAddress,
  (newVal) => {
    if (newVal) {
      current1Address.value = newVal
    }
  },
  { immediate: true } // 立即执行一次，以便在组件加载时设置current1Address的初始值
)

function startpos() {
  router.push({ path: '/startpos', query: { city: city.value } })
}
function endPot() {
  router.push({ path: '/endPot', query: { city: city.value } })
}

async function getPosition() {
  const path = '/s/p5/map/poiSearchV2'
  const params = {
    location: { lng: 118.186868, lat: 24.475187 },
    type: 1
  }
  const now = Date.now()
  const gmt = new Date(now).toUTCString()
  const header = createSignHeader(path, params, gmt)

  try {
    const response = await axios.post(`https://newapi-test.bbxhc.com${path}`, params, {
      headers: {
        ...header,
        at: 401,
        tm: now,
        av: '202409281550',
        ci: 'bbx24306',
        di: 'ffe882f016e9df3d7c091f936c54c0c6',
        qr: '',
        to: 'bWgPZwAAAAABAJO33qHphHS76iRLHJKDfSUHVbgFbnahqUKbgyftMIMBmMsypmwBreVKbGnMUpQvFElfURuhkYrGJAAAAA=='
      }
    })
    if (response.status === 200 && response.data.result) {
      current1Address.value = response.data.result.address_component.short_address
      mapCenter.value = [response.data.result.lng, response.data.result.lat]
      city.value = response.data.result.address_component.city
      cityStore.setCity(city.value) // 更新 Pinia store 中的 city
    }
  } catch (err) {
    console.error(err)
  }
}

//onMounted(getPosition)
</script>
<style scoped>
.upper {
  width: 100%;
}

.bottom {
  width: 100%;
  background: linear-gradient(182deg, #5681ff 0%, #ffffff 100%);
  box-shadow: 0rem -0.02rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
  border-radius: 0.4rem 0.4rem 0 0;
  margin-right: 0.2rem;
  position: fixed;
}

.top,
.text,
.text2 {
  font-family:
    PingFangSC,
    PingFang SC;
  text-align: left;
}

.top {
  margin-top: 0.3rem;
  height: 0.5rem;
  font-weight: 600;
  font-size: 0.36rem;
  color: #ffffff;
  line-height: 0.5rem;
}

.pic {
  display: flex;
  align-items: center;
}

.pic img {
  margin-left: 0.32rem;
  width: 0.44rem;
  height: 0.44rem;
  margin-top: 0.4rem;
  margin-right: 0.16rem;
}

.text {
  height: 0.8rem;
  font-weight: 500;
  font-size: 0.26rem;
  color: #16b596;
  line-height: 0.8rem;
  margin-left: 0.14rem;
}

.centered-text {
  text-align: center;
}

.img1 {
  margin-left: 1rem;
}

.img2 {
  margin-left: 0.24rem;
}

.box {
  margin: 0.2rem;
  height: 3.28rem;
  width: 7.1rem;
  background: #ffffff;
  border-radius: 0.3rem;
  border: 0.02rem solid #cbdbff;
}

.text2 {
  font-weight: 500;
  font-size: 0.42rem;
  color: #333333;
  line-height: 0.59rem;
  margin-left: 0.14rem;
}

.box2 {
  display: flex;
  align-items: center;
  background: #f4f6f8;
  border-radius: 0.2rem;
  width: 6.5rem;
  height: 1.2rem;
}

.img1 img,
.box2 img {
  width: 0.16rem;
  height: 0.16rem;
}

.img2 img {
  height: 0.2rem;
  width: 0.11rem;
}

.box2 {
  margin-left: 0.3rem;
}

.box2 img {
  margin-left: 0.8rem;
}
</style>
